<template>
  <el-dialog :model-value="dialogVisible" title="添加学生" width="400">
    <el-form :model="addForm" class="demo-form-inline">
      <el-form-item label="学号">
        <el-input v-model="addForm.id" placeholder="请输入学号" />
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="addForm.name" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="addForm.sex">
          <el-radio value="男">男</el-radio>
          <el-radio label="女">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input-number v-model="addForm.age" :min="1" :max="100" />
      </el-form-item>
      <el-form-item label="专业">
        <el-select v-model="addForm.major" placeholder="请选择专业" size="large" style="width: 240px">
          <el-option v-for="item in majorList" :key="item" :label="item" :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item label="班级">
        <el-input v-model="addForm.class" placeholder="请输入班级" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="emit('update:dialogVisible', false)">取消</el-button>
        <el-button type="primary" @click="emit('confirm', addForm)">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
const majorList = ['软件技术', '大数据技术', '人工智能技术与应用', '工业软件']
import { ref, reactive } from 'vue'
import { ElMessageBox } from 'element-plus'
const props = defineProps({
  dialogVisible: Boolean
})
const emit = defineEmits(['update:dialogVisible', 'confirm'])

const addForm = reactive({
  id: '',
  name: '',
  sex: '',
  age: '',
  major: '',
  class: ''
})
</script>